import React, {Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'

export default class More extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                {this.renderHeader()}

                {this.renderCeil('扫一扫', '', 13)}
                {this.renderCeil('省流量模式', '', 13)}
                {this.renderCeil('消息提醒')}
                {this.renderCeil('邀请好友使用小马哥电商')}
                {this.renderCeil('清空缓存')}
                {this.renderCeil('意见反馈', '', 13)}
                {this.renderCeil('问卷调查')}
                {this.renderCeil('支付帮助')}
                {this.renderCeil('网络诊断')}
                {this.renderCeil('关于码团')}
                {this.renderCeil('我要应聘')}
                {this.renderCeil('精品应用', '', 13)}
            </View>
        )
    }

    renderCeil(title, subTitle, top) {
        return (
            <View style={[styles.ceilContainer, {marginTop: top ? top : 2}]}>

                <Text style={{fontSize: 14, color: '#000'}}>{title}</Text>

                <Text style={{fontSize: 12, position: 'absolute', right: 25}}>{subTitle}</Text>

                <Image source={require('../../../imgs/icon_cell_rightarrow.png')}
                       style={styles.arrowImage}
                />

            </View>
        )
    }

    renderHeader() {
        return (
            <View style={styles.headerContainer}>
                <Text style={styles.title}>更多</Text>
                <Image source={require('../../../imgs/icon_mine_setting.png')} style={styles.optionImage}></Image>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    ceilContainer: {
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: 'white'
    },

    arrowImage: {
        width: 10,
        height: 15,
        position:'absolute',
        right:15
    },

    headerContainer: {
        height: 55,
        backgroundColor: '#f09738',
        justifyContent: 'center'
    },
    title: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    optionImage: {
        position: 'absolute',
        right: 15,
        width: 26,
        height: 26
    }
})